<template>
  <div>
    <search-form
      :search-config="searchConfig"
      :label-width="150"
      @clear="clearSearch"
      @search="handleSearch"
      @visible-change="handleVisibleChange"
    />
    <table-box ref="tableBox" show-index show-selection :other-filters="filtersRaw" :other-raw="paramsRaw" :table-config="tableConfig" @selection-change="handleSelectionChange" @btnOperate="handleBtnOperate" />
    <export-files
      v-if="exportisible"
      title="导出"
      :visible.sync="exportisible"
      download-url=""
      download-prefix=""
      :config="exportConfig"
      :success-fun="(config,res)=>{}"
      @success="handleExportSuccess"
    />
    <Termination ref="termination" :rows="selectedRows" @on-success="handleOnSuccess" />
  </div>
</template>

<script>
import Termination from './components/Termination'
import { getToken } from '@/utils/auth'
export default {
  name: 'PotentialCustomerFollowUp',
  components: {
    Termination
  },
  props: {
  },
  data() {
    return {
      searchConfig: [
        { label: '意向客户电话', prop: 'customerPhone', type: 'text', value: '', placeholder: '' },
        { label: '意向客户姓名', prop: 'customerName', type: 'text', value: '', placeholder: '' },
        {
          type: 'select',
          prop: 'intendedLevel',
          label: '意向等级',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/CTM_INTENTION_LEVEL`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          label: '招商经理',
          prop: 'managerName',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: '/slm-ctm/api/v1/ctmInvestmentManager/page',
            paramField: 'managerName', // 远程搜索参数名
            defaultProps: {
              label: 'managerName',
              value: 'managerName'
            },
            filtersRaw: [
              // { 'id': 'state', 'property': 'state', 'value': '1', 'operator': '=' }
            ],
            selectData: []
          },
          dialogConfig: {
            title: '招商经理',
            interfacePath: '/slm-ctm/api/v1/ctmInvestmentManager/page',
            setting: [{ prop: 'managerAccount', title: '编码' }, { prop: 'managerName', title: '名称' }],
            filtersRaw: [
              // { 'id': 'state', 'property': 'state', 'value': '1', 'operator': '=' }
            ],
            pageFlag: true
          }
        },
        { label: '招商经理电话', prop: 'managerPhone', type: 'text', value: '', placeholder: '' },
        { label: '市场编码', prop: 'marketCode', type: 'text', value: '', placeholder: '' },
        { label: '市场名称', prop: 'marketName', type: 'text', value: '', placeholder: '' },
        {
          label: '所属办事处',
          prop: 'agencyName',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: '/select-service/api/v1/organization/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'name'
            },
            selectData: []
          },
          dialogConfig: {
            title: '所属办事处',
            interfacePath: '/select-service/api/v1/organization/page',
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            filtersRaw: [{ 'id': 'isOffice', 'property': 'isOffice', 'value': '1', 'operator': '=' }],
            pageFlag: true
          }
        },
        {
          type: 'select',
          prop: 'joinStatus',
          label: '加盟状态',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/CTM_JOIN_IN_STATE`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          type: 'select',
          prop: 'isPayEarmestMoney',
          label: '是否缴纳保证金',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/BOOLEANS`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          type: 'date',
          prop: 'payEarmestMoneyTime',
          label: '保证金缴纳日期',
          value: '',
          placeholder: '',
          dateType: 'daterange',
          dateConfig: {
            valueFormat: 'yyyy-MM-dd HH:mm:ss'
          }
        },
        {
          type: 'select',
          prop: 'isFiling',
          label: '是否已建档',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/BOOLEANS`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          type: 'date',
          prop: 'filingTime',
          label: '建档日期',
          value: '',
          placeholder: '',
          dateType: 'daterange',
          dateConfig: {
            valueFormat: 'yyyy-MM-dd HH:mm:ss'
          }
        },
        {
          type: 'select',
          prop: 'isSite',
          label: '是否有场地',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/BOOLEANS`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        { label: '场地详细地址', prop: 'address', type: 'text', value: '', placeholder: '' },
        { label: 'BPM单号', prop: 'bpmNumber', type: 'text', value: '', operator: '=', placeholder: '' },
        {
          type: 'date',
          prop: 'allotTime',
          label: '意向客户分配时间',
          value: '',
          placeholder: '',
          dateType: 'daterange',
          dateConfig: {
            valueFormat: 'yyyy-MM-dd HH:mm:ss'
          }
        }
      ],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/ctmIntendedCustomerFollowUp/page`,
        hideSearchBar: true,
        sort: 'allotTime',
        order: 'DESC',
        // sortersRow: [
        // { id: 'allotTime', property: 'allotTime', direction: 'DESC' }
        // { id: 'createTime', property: 'createTime', direction: 'DESC' }
        // ],
        setting: [
          {
            prop: 'customerPhone',
            label: '意向客户电话',
            className: 'btn-green',
            minWidth: 130,
            isButton: true,
            clickFun: this.toDetail
          },
          {
            prop: 'customerName',
            label: '意向客户姓名',
            minWidth: 140
          },
          {
            prop: 'intendedLevel',
            label: '意向等级',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'CTM_INTENTION_LEVEL'
            }
          },
          {
            prop: 'intendedShopArea',
            label: '意向开店面积',
            minWidth: 130
          },
          {
            prop: 'managerName',
            label: '招商经理',
            minWidth: 120
          },
          {
            prop: 'managerPhone',
            label: '招商经理电话',
            minWidth: 130
          },
          {
            prop: 'marketCode',
            label: '市场编码',
            minWidth: 120
          },
          {
            prop: 'marketName',
            label: '市场名称',
            minWidth: 130
          },
          {
            prop: 'agencyName',
            label: '所属办事处',
            minWidth: 130
          },
          {
            prop: 'joinStatus',
            label: '加盟状态',
            minWidth: 120,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'CTM_JOIN_IN_STATE'
            }
          },
          {
            prop: 'allotTime',
            label: '意向客户分配时间',
            minWidth: 140
          },
          {
            prop: 'isPayEarmestMoney',
            label: '是否缴纳保证金',
            minWidth: 140,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'payEarmestMoneyTime',
            label: '缴纳保证金日期',
            minWidth: 140,
            formatData: this.$trimHMSFormatData('payEarmestMoneyTime')
          },
          {
            prop: 'shopBuildStage',
            label: '门店建设整体进度',
            minWidth: 150,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'BEFORE_CONST_SCHEDULE'
            }
          },
          {
            prop: 'isFiling',
            label: '是否已建档',
            minWidth: 120,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'filingTime',
            label: '建档日期',
            minWidth: 140
            // formatData: this.$trimHMSFormatData('filingTime')
          },
          {
            prop: 'isSite',
            label: '是否有场地',
            minWidth: 120,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'address',
            label: '场地详细地址',
            minWidth: 140
          },
          {
            prop: 'bpmNumber',
            label: 'BPM单号',
            minWidth: 140
          }
        ],
        btnList: process.env.NODE_ENV === 'development' ? [
          { buttonName: '编辑', optCode: 'edit', outerFlag: true },
          { buttonName: '终止', optCode: 'termination', outerFlag: true },
          { buttonName: '导出', optCode: 'export', outerFlag: true }
        ] : null
      },
      exportisible: false,
      selectedRows: [],
      filtersRaw: [],
      paramsRaw: {}
    }
  },
  computed: {
    exportConfig() {
      return [
        {
          code: '1',
          name: '意向客户跟进管理',
          async: false, // 同步导出数据
          templateCode: '', // 模板code
          dataApi: `${process.env.VUE_APP_BASE_API}/api/v1/ctmIntendedCustomerFollowUp/export`, // 数据导出api
          headers: { token: getToken() },
          filtersRaw: this.filtersRaw, // 符合当前查询条件的所有数据行的导出条件(当前数据查询结果对应的条件)
          paramsRaw: this.paramsRaw,
          sort: 'createTime', // 排序字段
          order: 'desc', // 排序方式
          selectedRows: this.selectedRows, // 当前所选中的数据行
          queryField: 'id'// 指定行导出时使用的查询字段名称
        }
      ]
    }
  },
  methods: {
    clearSearch() {
      this.filtersRaw = []
      this.paramsRaw = {}
    },
    handleSearch({ filtersRaw, paramsRaw }) {
      this.filtersRaw = this.$dateFiltersRawRangeHandle(filtersRaw, 'filingTime payEarmestMoneyTime allotTime')
      this.paramsRaw = paramsRaw
      this.refreshTableBoxData()
    },
    handleVisibleChange() {
      this.$nextTick(() => {
        this.$refs.tableBox && this.$refs.tableBox.refreshTableHeight()
      })
    },
    refreshTableBoxData(flag) {
      this.$nextTick(() => {
        this.$refs.tableBox.initTableData(flag)
      })
    },
    handleSelectionChange(rows) {
      this.selectedRows = rows
    },
    handleBtnOperate(flag) {
      this[flag] && this[flag]()
    },
    edit() {
      if (!this.singleJudge(this.selectedRows, '编辑', true)) {
        return
      }
      const d = this.selectedRows[0]
      // 仅当加盟状态为“洽谈中”时，允许操作编辑按钮
      if (d.joinStatus !== 'A') {
        this.$message.warning(`仅当加盟状态为【洽谈中】时，允许编辑`)
        return
      }
      this.$pageStack.push('src/views/channelTask2/attractInvestment/potentialCustomerFollowUp/components/Edit.vue', {
        props: {
          id: d.id
        }
      }, (flag) => {
        flag && this.refreshTableBoxData(flag)
      })
    },
    toDetail(row) {
      this.$pageStack.push('src/views/channelTask2/attractInvestment/potentialCustomerFollowUp/components/detail.vue', {
        props: {
          id: row.id
        }
      })
    },
    export() {
      this.exportisible = true
    },
    termination() {
      if (!this.singleJudge(this.selectedRows, '终止', true)) {
        return
      }
      if (this.selectedRows[0].joinStatus !== 'A') {
        this.$message.warning(`仅当加盟状态为【洽谈中】时，允许终止`)
        return
      }
      if (this.selectedRows[0].joinStatus === 'D') {
        this.$message.warning(`当前客户已终止!`)
        return
      }
      this.$refs.termination.openDialog(this.selectedRows[0])
    },
    handleExportSuccess() {

    },
    handleOnSuccess() {
      this.refreshTableBoxData('onPage')
    }
  }
}
</script>
